import { useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { SearchBar } from "antd-mobile";

import CategoryList from "./components/category-list";
import BrandList from "./components/brand-list";
import ProductList from "./components/product-list";

import styled from "./index.module.scss";

const ProductsNew = () => {
  const [search] = useSearchParams();
  const navigate = useNavigate();

  // 激活的分类Id, 使用 url 地址中的 cid 参数作为默认值
  const [classId, setClassId] = useState(search.get("cid") || "");
  // 激活的品牌Id
  const [brandId, setBrandId] = useState("");

  return (
    <div
      style={{
        height: "100%",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div className={styled["search-box"]} onClick={() => navigate("/search")}>
        <SearchBar placeholder="请输入您想要售卖的机型名称" />
      </div>

      <CategoryList activeKey={classId} setActiveKey={setClassId} />

      <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
        <BrandList
          classId={classId}
          activeKey={brandId}
          setActiveKey={setBrandId}
        />

        {classId && brandId && (
          <ProductList classId={classId} brandId={brandId} />
        )}
      </div>
    </div>
  );
};

export default ProductsNew;
